<template>
	<div class="container1">
		<div class="box b1"></div>
		<div class="box b2"></div>
		<div class="box b3"></div>
		<div class="box b4"></div>
		<div class="box b5"></div>
	</div>
	<div class="container2">
		<div class="box b1">1</div>
		<div class="box b2">测测测测测测测测试试试试试试试测测测测测测测试试试试试试试测测测测测测试试试试试试试</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container3">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
	</div>
	<div class="container4">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
	</div>
	<div class="container5">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container6">
		<div class="box b1">
			<div class="subcontainer">
				<div class="box s1">s1</div>
				<div class="box s2">s2</div>
				<div class="box s3">s3</div>
			</div>
		</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
	</div>
	<div class="container7">
		<div class="box b1">
			<div class="left">left</div>
			<div class="right r1">right</div>
			<div class="right">right</div>
		</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container8">
		<div class="box b1">
			<div class="subcontainer">
				<div class="box s1">s1</div>
				<div class="box s2">s2</div>
				<div class="box s3">s3</div>
			</div>
		</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
	</div>
	<div class="container9">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container10">
		<div class="box b1">
			<div class="box-item">1</div>
		</div>
		<div class="box b2">
			<div class="box-item">2</div>
		</div>
		<div class="box b3">
			<div class="box-item">3</div>
		</div>
		<div class="box b4">
			<div class="box-item">4</div>
		</div>
		<div class="box b5">
			<div class="box-item">5</div>
		</div>
	</div>
	<div class="container11">
		<div class="row">
			<div class="box b1">1</div>
			<div class="box b2">2</div>
			<div class="box b3">3</div>
			<div class="box b4">4</div>
			<div class="box b5">5</div>
		</div>
		<div class="row">
			<div class="box b1">1</div>
			<div class="box b2">2</div>
			<div class="box b3">3</div>
			<div class="box b4">4</div>
			<div class="box b5">5</div>
		</div>
	</div>
	<div class="container12">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container13">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
	</div>
	<div class="container14">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
	</div>
	<div class="container15">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
	</div>
	<div class="container16">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container17">
		<div class="box b1">
			<div class="subbox s1">s1</div>
			<div class="subbox s2">s2</div>
			<div class="subbox s3">s3</div>
		</div>
		<div class="box b2"></div>
		<div class="box b3"></div>
		<div class="box b4"></div>
		<div class="box b5"></div>
	</div>
	<div class="container18">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container19">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container20">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container21" @click="getFlip" :class="{ 'flipped': isFlip }">
		<div class="pic">
			<img src="../../images/1.jpg" alt="">
		</div>
		<div class="info">这这这这这这这里是文字内容里是文字内容里是文字内容里是文字内容里是文字内容里是文字内容里是文字内容</div>
	</div>
	<div class="container22">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container23">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
		<div class="box b7">7</div>
		<div class="box b8">8</div>
	</div>
	<div class="container24">
		<div class="box b1">1</div>
		<div class="box b2">测测测测测测测测试试试试试试试试</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container25">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container26">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container27">
		<div class="box b1">
			<div class="box-item">1</div>
		</div>
		<div class="box b2">
			<div class="box-item">2</div>
		</div>
	</div>
	<div class="container28">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container29">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container30">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container31">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container32">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
	</div>
	<div class="container33">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
	</div>
	<div class="container34">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container35">
		<div class="box">122222</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">4</div>
		<div class="box">5</div>
	</div>
	<div class="container36">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container37">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container38">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container39">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">测试</div>
		<div class="box b5">5</div>
	</div>
	<div class="container40">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
		<div class="box b5">5</div>
	</div>
	<div class="container41">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container42">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		这里是文字
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container43">
		<div class="box b1" :style="getRandomHeight()">1</div>
		<div class="box b2" :style="getRandomHeight()">2</div>
		<div class="box b3" :style="getRandomHeight()">3</div>
		<div class="box b4" :style="getRandomHeight()">4</div>
		<div class="box b5" :style="getRandomHeight()">5</div>
	</div>
	<div class="container44">
		<div class="box b1" :style="getRandomWidth()">1</div>
		<div class="box b2" :style="getRandomWidth()">2</div>
		<div class="box b3" :style="getRandomWidth()">3</div>
		<div class="box b4" :style="getRandomWidth()">4</div>
		<div class="box b5" :style="getRandomWidth()">5</div>
	</div>
	<Row type="flex">
		<Col flex="1">
		栏目1
		</Col>
		<Col flex="2">
		栏目2
		</Col>
	</Row>
	<div class="container45">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container46">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container47">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container48">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container49">
		<div class="box b1">1</div>
	</div>
	<div class="container50">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container51">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container52">
		<div class="box">This is a paragraph.</div>
	</div>
	<Row type="flex" align="middle">
		<Col flex="1">
		<Select v-model="writingMode.value" @on-change="writingMode.onChangeSelect">
			<Option v-for="item in writingMode.list" :value="item.value" :key="item.value">{{ item.label }}</Option>
		</Select>
		</Col>
		<Col flex="2" offset="1">
		<div class="box" :style="writingMode.style">writing mode</div>
		</Col>
	</Row>
	<div class="container54">
		<div class="box">这里是内容</div>
		<div class="box">This is the content</div>
		<div class="box">123</div>
		<div class="box b1"><span>1</span><span>2</span><span>3</span></div>
	</div>
	<div class="container55" :style="writingMode.style">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container56">
		<div class="box b1">
			<p>内容1</p>
			<p>内容2</p>
		</div>
		<div class="box b2">
			<div class="item">栏目1</div>
			<div class="item">栏目2</div>
			<div class="item">栏目3</div>
			<div class="item">栏目4</div>
			<div class="item">Link1</div>
			<div class="item">Link2</div>
			<div class="item">Link3</div>
		</div>
	</div>
	<div class="container57">
		<Row>
			<Col span="12" push="1" class="box">
			栏目1
			</Col>
			<Col span="12" class="box">
			栏目2
			</Col>
		</Row>
	</div>
	<div class="container58">
		<div class="box">
			<div class="box-item b1">1</div>
			<div class="box-item b2">2</div>
			<div class="box-item b3">3</div>
			<div class="box-item b4">4</div>
		</div>
	</div>
</template>
<script>
import html2canvas from 'html2canvas-v1.4';
import { createColumn } from './class/250916_1';

export default {
	data() {
		return {
			isFlip: false,
			obj: createColumn.call(this),
			obj2: {
				a: 1,
				b: 2,
				render: () => {
					console.log(`obj2`);
					console.log(this)
				}
			},
			writingMode: {
				value: 0,
				list: [{
					value: 0,
					label: 'horizontal-tb'
				}, {
					value: 1,
					label: 'vertical-lr'
				}, {
					value: 2,
					label: 'vertical-rl'
				}, {
					value: 3,
					label: 'sideways-lr'
				}, {
					value: 4,
					label: 'sideways-rl'
				}],
				style: {},
				onChangeSelect: (e) => {
					let { list, value } = this.writingMode;
					let { label } = list[value];
					this.writingMode.style = {
						'writing-mode': label
					}
					console.log(this.writingMode.style);
				}
			}
		}
	},
	methods: {
		getFlip() {
			this.isFlip = !this.isFlip
		},
		getRandomHeight() {
			let height = Math.floor(Math.random() * 100) + 50;
			return {
				'grid-row': 'auto / span ' + height
			}
		},
		getRandomWidth() {
			let width = Math.floor(Math.random() * 100) + 50;
			return {
				'grid-column': 'auto / span ' + width
			}
		}
	},
	mounted() {
		console.log(`mounted`);
		this.obj.render();
		this.obj2.render();
	}
}
</script>
<style lang="scss">
.container58 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	// grid-auto-flow: dense;
	.box {
		display: contents;
		&-item {
			&.b1 {
				grid-column: 2 / 4;
			}
		}
	}
}
.container57 {
	.box {
		border: 1px solid #000;
	}
}
.container56 {
	display: grid;
	grid-template-columns: 1fr auto;
	.box {
		&.b2 {
			writing-mode: vertical-lr;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			justify-content: space-between;
		}
	}
}
.container55 {
	display: grid;
	grid-template-columns: repeat(3, 50px);
	grid-auto-rows: 50px;
	.box {
		border: 1px solid #000;
	}
}
.container54 {
	direction: rtl;
	unicode-bidi: bidi-override;
	.b1 {
		display: flex;
	}
}
.container53 {
	.box {}
}
.container52 {
	.box {
		//direction: rtl; 只有设置在body中才有效果
		text-align: left;
	}
}
.container51 {
	display: flex;
	justify-content: space-around;
	.box {
		width: 50px;
		height: 50px;
		border: 1px solid #000;
	}
}
.container50 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-template-rows: repeat(3, 20%);
	width: 500px;
	height: 500px;
	gap: 10px;
	justify-content: space-around;
	// align-content: center;
	// justify-content: center;
	//justify-content: space-between;
	grid-template-areas:
		"a a c"
		"a a c"
		"b b d";
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
		}
		&.b2 {
			grid-area: b;
		}
		&.b3 {
			grid-area: c;
		}
		&.b4 {
			grid-area: d;
		}
	}
}
.container49 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		". a a ."
		". a a .";
	grid-auto-rows: 50px;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
			justify-self: center;
			align-self: center;
		}
	}
}
.container48 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	.box {
		border: 1px solid #000;
		&.b1 {
			aspect-ratio: 2/1;
			//height: 50px;
		}
	}
}
.container47 {
	display: grid;
	grid-template-columns: repeat(2, 100px);
	grid-template-rows: repeat(2, 100px);
	.box {
		border: 1px solid #000;
		&.b1 {
			justify-self: start;
			align-self: start;
		}
		&.b2 {
			justify-self: start;
			align-self: end;
		}
		&.b3 {
			justify-self: end;
			align-self: start;
		}
		&.b4 {
			justify-self: end;
			align-self: end;
		}
	}
}
.container46 {
	display: grid;
	width: 250px;
	height: 250px;
	grid-template-columns: repeat(2, 100px);
	grid-template-rows: repeat(2, 100px);
	justify-content: space-between;
	align-content: space-between;
	.box {
		border: 1px solid #000;
	}
}
.container45 {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-areas:
		"a a a a b b b b"
		"a a a a b b b b"
		"c c c c d d d d"
		"c c c c d d d d";
	grid-auto-rows: repeat(2, 1fr);
	height: 100px;
	gap: 10px;
	//align-items: start;
	//justify-content: space-between;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
		}
		&.b2 {
			grid-area: b;
		}
		&.b3 {
			grid-area: c;
		}
		&.b4 {
			grid-area: d;
		}
	}
}
.container44 {
	display: grid;
	grid-template-rows: 100px 100px;
	grid-auto-flow: column;
	height: 200px;
	grid-auto-columns: 1px;
	.box {
		border: 1px solid #000;
	}
}
.container43 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1px;
	.box {
		border: 1px solid #000;
	}
}
.container42 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 100px;
	gap: 10px;
	.box {
		border: 1px solid #000;
	}
}
.container41 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	//grid-auto-flow: dense;
	grid-auto-rows: 100px;
	.box {
		border: 1px solid #000;
		&.b3 {
			grid-column: auto/ span 2;
			grid-row: auto/ span 2;
		}
	}
}
.container40 {
	display: grid;
	grid-template-rows: repeat(3, 100px);
	gap: 10px;
	grid-auto-flow: column;
	grid-auto-columns: 100px 50px;
	.box {
		border: 1px solid #000;
	}
}
.container39 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 50px 100px;
	gap: 10px;
	.box {
		border: 1px solid #000;
	}
}
.container38 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(50px, auto);
	gap: 10px;
	.box {
		border: 1px solid #000;
	}
}
.container37 {
	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	gap: 10px;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: col-start / span 12;
		}
		&.b2 {
			grid-column: col-start / span 4;
		}
		&.b3 {
			grid-column: col-start 5 / span 4;
		}
		&.b4 {
			grid-column: col-start 9/ span 4;
		}
		&.b5 {
			grid-column: col-start / span 12;
		}
	}
}
.container36 {
	display: grid;
	grid-template-columns: repeat(4, [a-start] 1fr [a-end]);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: a-start/ a-end 2;
		}
	}
}
.container35 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	.box {
		border: 1px solid #000;
	}
}
.container34 {
	display: grid;
	grid-template-columns: repeat(3, [a] 1fr);
	grid-template-rows: repeat(auto-fit, 1fr);
	//grid-template-rows: repeat(auto-fit, 20px);
	height: 200px;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-row: 4;
			grid-column: a / a 3;
		}
		&.b2 {
			grid-row: 5;
			grid-column: a / span 2;
		}
		&.b3 {
			grid-row: 1 / span 3;
		}
		&.b4 {
			grid-row: 6;
		}
		&.b5 {
			grid-row: 7;
		}
	}
}
.container33 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30px, auto));
	grid-template-rows: repeat(auto-fit, minmax(50px, auto));
	height: 200px;
	.box {
		border: 1px solid #000;
	}
}
.container32 {
	display: grid;
	grid-template-areas:
		"a b c d"
		"a b c d"
		"e e e d";
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 50px);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
		}
		&.b2 {
			grid-area: b;
		}
		&.b3 {
			grid-area: c;
		}
		&.b4 {
			grid-area: d;
		}
		&.b5 {
			grid-area: e;
		}
		&.b6 {
			background: rgba(128, 128, 128, 0.397);
			grid-column-start: a-start;
			grid-column-end: a-end;
			grid-row-start: a-start;
			grid-row-end: e-end;
		}
	}
}
.container31 {
	display: grid;
	grid-template-columns: [a] 1fr [b] 2fr [c] 3fr [d];
	grid-template-rows: [a] 100px [b] 50px [c] 50px [d];
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: a / c;
			grid-row: a/c;
		}
	}
}
.container30 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.container29 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: 1/span 2;
		}
		&.b2 {
			grid-column: 1/span 4;
		}
		&.b3 {
			grid-column: 3/span 5;
		}
		&.b4 {
			grid-column: span 2/4;
		}
	}
}
.container28 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: minmax(50px, auto);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: 1/-1;
		}
	}
}
.container27 {
	display: flex;
	gap: 20px;
	.box {
		height: 20px;
		&.b1 {
			flex: 1;
			position: relative;
			background: rgba(255, 0, 0, 0.1);
			&:after {
				content: '';
				width: 20px;
				height: 100%;
				background: rgba(255, 0, 0, 0.1);
				right: -20px;
				top: 0;
				position: absolute;
				clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
			}
		}
		&.b2 {
			flex: 2;
			position: relative;
			background: rgba(0, 128, 0, 0.1);
			&:before {
				content: '';
				width: 20px;
				height: 100%;
				background: rgba(0, 128, 0, 0.1);
				left: -20px;
				top: 0;
				position: absolute;
				clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
			}
		}
	}
}
.container26 {
	display: grid;
	grid-template-areas:
		"a b b b c"
		"a . . . c"
		"a d d d c";
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 50px);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
		}
		&.b2 {
			grid-area: b;
		}
		&.b3 {
			grid-area: c;
		}
		&.b4 {
			grid-area: d;
		}
	}
}
.container25 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(3, 50px);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: 1/2;
			grid-row: 1/4;
		}
		&.b2 {
			grid-column: 2/5;
			grid-row: 1/2;
		}
		&.b3 {
			grid-column: 2/5;
			grid-row: 3/4;
		}
		&.b4 {
			grid-column: 5/6;
			grid-row: 1/4;
		}
	}
}
.container24 {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	.box {
		flex: 0 0 100px;
		border: 1px solid #000;
		align-self: start;
	}
}
.container23 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 100px);
	.box {
		border: 1px solid #000;
	}
}
.container22 {
	display: grid;
	grid-template:
		"a a" 50px
		"b c" 50px "d d" 50px
		/ 1fr 2fr;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
		}
		&.b2 {
			grid-area: b
		}
		&.b3 {
			grid-area: c
		}
		&.b4 {
			grid-area: d
		}
	}
}
.container21 {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-areas: "pic info";
	.pic {
		grid-area: pic;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}
	.info {
		grid-area: info;
	}
	&.flipped {
		grid-template-areas: "info pic";
		grid-template-columns: 1fr 100px;
	}
}
.container20 {
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
		}
		&.b2 {
			grid-area: b;
		}
		&.b3 {
			grid-area: c;
		}
		&.b4 {
			grid-area: d;
		}
	}
}
@media (width >=300px) {
	.container20 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-areas:
			"a a a a"
			"b b c c"
			"b b c c"
			"b b d d";
		grid-auto-rows: minmax(30px, auto);
	}
}
@media (width <=300px) {
	.container20 {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"a"
			"b"
			"c"
			"d";
		grid-auto-rows: minmax(30px, auto);
	}
}
.container19 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		"a a b b"
		"c c c c"
		". . . d";
	grid-auto-rows: minmax(30px, auto);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: a;
		}
		&.b2 {
			grid-area: b;
		}
		&.b3 {
			grid-area: c;
		}
		&.b4 {
			grid-area: d;
		}
	}
}
.container18 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-area: 1 / 1 / 3 / 3
		}
	}
}
.container17 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(50px, auto);
	.box {
		border: 1px solid #000;
		grid-column: 1/4;
		&.b1 {
			padding: 10px;
			display: contents;
		}
	}
	.subbox {
		border: 1px solid #000;
	}
}
.container16 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 50px;
	position: relative;
	.box {
		border: 1px solid #000;
		&.b3 {
			grid-column: 2;
			grid-row: 1;
			position: absolute;
			left: 10px;
			top: 10px;
		}
	}
}
.container15 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	.box {
		border: 1px solid #000;
	}
}
.container14 {
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	.box {
		border: 1px solid #000;
	}
}
.container13 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 100px;
	.box {
		border: 1px solid #000;
		&.b1 {
			align-self: stretch;
		}
		&.b2 {
			align-self: start;
		}
		&.b3 {
			align-self: end;
		}
	}
}
.container12 {
	display: grid;
	grid-template-columns: auto;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: 1/4;
		}
	}
}
.container11 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: minmax(50px, auto);
	.row {
		grid-column: 1/6;
		display: grid;
		grid-template-columns: subgrid;
	}
	.box {
		border: 1px solid #000;
	}
}
.container10 {
	display: flex;
	flex-wrap: wrap;
	.box {
		//flex: 1;
		&:nth-child(4n+1) {
			flex-basis: 30%;
		}
		&:nth-child(4n+2) {
			flex-basis: 70%;
		}
		&:nth-child(4n+3) {
			flex-basis: 70%;
		}
		&:nth-child(4n+4) {
			flex-basis: 30%;
		}
		&-item {
			border: 1px solid #000;
			height: 50px;
		}
	}
}
.container9 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 50px;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-row: 1;
			grid-column: 1/4;
			background: rgba(255, 0, 0, 0.377);
			// z-index: 1;
		}
		&.b2 {
			grid-row: 1 / 2;
			grid-column: 1;
			background: rgba(0, 128, 0, 0.493);
		}
	}
}
.container8 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-auto-rows: 50px;
	.subcontainer {
		display: grid;
		grid-template-columns: subgrid;
		height: 100%;
	}
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-row-start: 1;
			grid-row-end: 4;
		}
		&.b2 {
			grid-column-start: 2;
			grid-column-end: 4;
		}
	}
}
.container7 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-column: 1/4;
			display: flex;
			.r1 {
				margin-left: auto;
			}
		}
	}
}
.container6 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-auto-rows: 50px;
	.subcontainer {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		height: 100%;
	}
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-row-start: 1;
			grid-row-end: 4;
		}
		&.b2 {
			grid-column-start: 2;
			grid-column-end: 4;
		}
	}
}
.container5 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	gap: 10px;
	.box {
		border: 1px solid #000;
	}
}
.container4 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-auto-rows: 50px;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-row: 1/4;
		}
		&.b2 {
			grid-column: 2/4;
		}
	}
}
.container3 {
	display: grid;
	grid-template-columns: repeat(3, 100px);
	grid-auto-rows: 50px;
	.box {
		border: 1px solid #000;
		&.b1 {
			grid-row-start: 1;
			grid-row-end: 4;
		}
		&.b2 {
			grid-column-start: 2;
			grid-column-end: 4;
		}
	}
}
.container2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	//grid-auto-rows: minmax(50px, 100px);
	grid-auto-rows: minmax(50px, auto);
	.box {
		border: 1px solid #000;
		align-self: start;
	}
}
.container1 {
	display: grid;
	grid-template-columns: 102px 1fr 1fr;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
	}
}
div[class^="container"] {
	margin-bottom: 10px;
}
</style>